<template>
  <div class="column is-one-quarter" >
    <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          {{title.slice(0,4)}}
        </p>
        <div class="block">
          <button class="delete is-small" @click="deleteTodo">
          </button>
        </div>
      </header>
      <div class="card-content">
        <div class="content">
          {{title}}
        </div>
      </div>
      <footer class="card-footer">
        <button :class="['button is-small  is-light mx-5',hasFinish?'is-primary':'is-danger']">
          {{hasFinish?'已':'未'}}完成
        </button>
        <button class="button is-small is-info is-light mx-6" @click="toggleFinish">
          切换成{{hasFinish?'未':'已'}}完成
        </button>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  props: ['id', 'title', 'hasFinish'],
  methods: {
    toggleFinish () {
      this.$emit('toggle-finish', { id: this.id })
    },
    deleteTodo () {
      this.$emit('delete-todo', { id: this.id })
    }
  }
}
</script>

<style scoped>
/* .success {
  color:aqua;
}
.danger {
  color: palevioletred;
} */
</style>
